<template>
  <div class="flex-row">
    <div class="left-row flex-1 pr-20">
      <div class="section-title"><svg-icon iconName="biaoti1" class="mr-10"></svg-icon>产品介绍</div>
      <div class="fs-14 f-normal mt-20 mb-20">
        数据传输服务(Data Transmission Service,简称DTS)是一种集数据迁移、增量数据实时订阅及数据实时同步于一体的数据传输服务。支持关系型数据库、NoSQL、大数据(OLAP)等数据源间的数据传输。 它是一种集数据迁移、数据订阅及数据实时同步于一体的数据传输服务。数据传输致力于在公有云、混合云以及私有云场景下，解决远距离、毫秒级异步数据的传输难题。
      </div>
      <div class="section-title"><svg-icon iconName="biaoti3" class="mr-10"></svg-icon>应用场景</div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="item.title" :name="item.num"  v-for="(item,index) in tabList" :key="index">
          <div class="list-box">
            <div class="title"> <span>{{index+1}}</span> {{item.name}} </div>
            <div class="mb-20">{{item.label}}</div>
          </div>
          <div class="img-box bor" v-if="item.imgUrl">
            <img :src="item.imgUrl" alt="">
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="left-row flex-1 pl-20">
      <div class="section-title "><svg-icon iconName="biaoti3" class="mr-10"></svg-icon>产品功能架构</div>
      <div class="framework-img mt-20 bor">
        <img :src="frameworkImg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'tab-11-1',
    data () {
      return {
        activeName: '0',
        tabList: [
          {
            title: '场景1',
            num: '0',
            imgUrl: require('../../../assets/images/pic/img-11-1.png'),
            name: '不停机迁移',
            label: '基于DTS的不停机迁移，是一种实时的在线逻辑迁移。整个迁移过程中，原始的应用系统在不停止的情况下，可以继续对外提供服务。如果原始数据量较多，可以选择合适的网络带宽，确保源数据快速地迁移至目标库。针对新旧数据库异构的情况，DTS在工作时，底层进行了数据对象的转换映射，整个过程对用户来说是完全透明的，降低了用户的使用难度。'
          },
          {
            title: '场景2',
            num: '1',
            imgUrl: require('../../../assets/images/pic/img-11-2.png'),
            name: '数据异地灾备',
            label: '数据异地灾备，建立一个异地的数据系统。该系统是本地关键应用数据的一个可用复制。在本地数据及应用系统出现灾难时，确保异地保存有一份可用的关键业务数据。DTS提供的实时同步功能，可以确保用户灾备数据系统和原始数据系统时刻保持毫秒级的同步延迟。即使用户原始数据系统发生故障，新的灾备系统，由于和原始系统保持了数据一致，这样对于应用来说，也不会产生什么影响。'
          },
          {
            title: '场景3',
            num: '2',
            imgUrl: require('../../../assets/images/pic/img-11-3.png'),
            name: '异地多活',
            label: '异地多活指分布在异地的多个站点同时对外提供服务的业务场景。异地多活是高可用架构设计的一种，与传统的灾备设计的最主要区别在于“多活”，即所有站点都是同时在对外提供服务的。DTS具备对数据的双向同步能力，在进行合理的配置之后，可以完成“多活”场景下各个节点数据层的信息时刻保持一致。针对双向同步时可能存在的数据冲突问题，DTS特有的回环检测技术，可以确保两端的数据保持最终一致性。'
          }
        ],
        frameworkImg: require('../../../assets/images/pic/img-11.png')
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event)
      }
    }
  }
</script>

<style scoped lang="scss">
  .flex-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
  }
</style>
